<template>
  <div class="toogle-model">
    <template v-for="item in modelList" :key="item.value">
      <div
        class="toogle-model-item"
        :class="{ active: model === item.value }"
        @click="handleClick(item.value)"
      >
        <span>{{ item.label }}</span>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  model: {
    type: String,
    default: ''
  },
  modelList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:model', 'click'])

const handleClick = (value: string) => {
  emit('update:model', value)
  emit('click', value)
}
</script>
<style lang="scss" scoped>
.toogle-model {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 255, 167, 0.8);
  padding: 4px;
  border-radius: 30px;
  background-color: var(--bg-color);
  box-sizing: border-box;
  border: 1px solid var(--el-color-primary-light-5);
  border-radius: 50px;
  background: rgb(12, 34, 49);

  .toogle-model-item {
    cursor: pointer;
    padding: 4px 20px;
    border-radius: 20px;
    color: var(--text-color);
    white-space: nowrap;
    &.active {
      font-family: 'youshebiaotihei';
      background-color: #00ffa74d;
      color: var(--el-color-primary);
    }

    &:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>
